跳到主要内容

next js之pages目录路由说明

· 阅读需 2 分钟
文浩Marvin

Next.js使用一个名为pages的特殊目录。这个目录用于自动路由。每一个在pages目录下的.js.jsx.ts.tsx文件都会自动成为一个可访问的路由。以下是一个示例:

pages/
├── index.js
├── about.js
├── dashboard.js
├── blog/
│ ├── index.js
│ ├── [slug].js
│ └── [id]/
│ └── index.js
└── user/
├── index.js
└── [id].js
  • index.js: 这是你的主页,可以通过/来访问。
  • about.js: 这是关于页面,可以通过/about来访问。
  • dashboard.js: 这是仪表盘页面,可以通过/dashboard来访问。
  • blog/index.js: 这是博客列表页面,可以通过/blog来访问。
  • blog/[slug].js: 这是博客文章页面,可以通过/blog/:slug来访问,其中:slug是文章的唯一标识符。
  • blog/[id]/index.js: 这是博客文章详情页面,可以通过/blog/:id来访问,其中:id是文章的唯一ID。
  • user/index.js: 这是用户列表页面,可以通过/user来访问。
  • user/[id].js: 这是用户详情页面,可以通过/user/:id来访问,其中:id是用户的唯一ID。

[]中的部分是动态路由参数。例如,[slug].js会匹配/blog/hello-world,其中hello-world是动态部分,可以在页面组件中通过router.query.slug来获取。

这种文件系统路由的方式使得路由的创建变得非常直观和简单,你只需要添加或删除文件,就可以轻松地创建或删除路由。

关于[...sulg].js用法

[...slug].js是Next.js中的一种特殊路由,被称为“捕获所有路由”。这种路由可以匹配一个或多个动态段,而不仅仅是一个。

例如,假设你的pages目录如下:

pages/
├── index.js
└── post/
└── [...slug].js

在这种情况下,[...slug].js可以匹配以下路径:

  • /post/a
  • /post/a/b
  • /post/a/b/c
  • /post/a/b/c/d
  • 等等

在每种情况下,slug参数都是一个数组,包含了所有的动态段。例如,对于路径/post/a/b/cslug参数将是['a', 'b', 'c']

你可以在你的页面组件中通过router.query.slug来获取这个数组。例如:

import { useRouter } from 'next/router'

export default function Post() {
const router = useRouter()

console.log(router.query.slug) // 输出: ['a', 'b', 'c'] 对于路径 /post/a/b/c

// ...
}

这种类型的路由在你需要处理嵌套路径(例如分类或多级导航)时非常有用。

Loading Comments...